<template>
<div id="totalData">
    <v-app id="inspire">
    <v-container>
      <v-row>
        <div id="data">
          <div id="title">现存确诊</div>
          <div id=number><span style="color: #fa2929">{{addConfirm}}</span></div>
          <div id="number1">总数<span style="color: #fa2929">{{confirm}}</span></div>
        </div>
        <div id="data" style="margin-left:2vw;border-color:#870000">
          <div id="title">无症状感染者</div>
          <div id="number"><span style="color:#870000">{{addNosymptom}}</span></div>
          <div id="number1">总数<span style="color:#870000">{{noSymptom}}</span></div>
        </div>
        <div id="data" style="  margin-left:2vw;border-color:#f6a14c">
          <div id="title">境外输入</div>
          <div id="number"><span style="color:#f6a14c">{{addInput}}</span></div>
          <div id="number1">总数<span style="color:#f6a14c">{{input}}</span></div>
        </div>
      </v-row>
      <v-row style="margin-top:38px">
          <div id="data" style="border-color:#870000">
            <div id="title">累计确诊</div>
            <div id="number"><span style="color:#870000">{{addTotal}}</span></div>
            <div id="number1">总数<span style="color:#870000">{{total}}</span></div>
          </div>
          <div id="data" style="margin-left:2vw;border-color:#000000">
            <div id="title">累计死亡</div>
            <div id="number"><span style="color:black">{{addDead}}</span></div>
            <div id="number1">总数<span style="color:black">{{dead}}</span></div>
          </div>
          <div id="data" style="margin-left:2vw;border-color:#a5b480">
            <div id="title">累计治愈数</div>
            <div id="number" style="color:#a5b480"><span style="color:#a5b480">{{addHeal}}</span></div>
            <div id="number1">总数<span style="color:#a5b480">{{heal}}</span></div>
          </div>
      </v-row>
    </v-container>
  </v-app>
</div>
</template>

<script>
export default {
    name: 'Data',
    data() {
        return{
            confirm:"",
            total:"",
            heal:"",
            dead:"",
            input:"",
            noSymptom:"",
            addConfirm:"",
            addTotal:"",
            addHeal:"",
            addDead:"",
            addInput:"",
            addNosymptom:""

        }
    },
    mounted(){
            this.$api.overview.chinaTable().then(res=>{
            let result = res
            if(result.success){
                  console.log(result.data.total)
                  let result1 = result.data.total
                  this.total = result1.total;
                  this.heal = result1.heal;
                  this.input = result1.input;
                  this.confirm = result1.confirm;
                  this.noSymptom = result1.noSymptom;
                  this.dead = result1.dead;
                  this.addTotal = result1.addTotal;
                  this.addHeal = result1.addHeal;
                  this.addDead = result1.addDead;
                  this.addConfirm = result1.addConfirm;
                  this.addInput = result1.addInput;
                  this.addNosymptom = result1.addNoSymptom;
                  if(this.addNosymptom=="+null")
                    this.addNosymptom="+0"
                  if(this.addInput=="+null")
                    this.addInput="+0"
                  if(this.addConfirm=="+null")
                    this.addInput="+0"
                  if(this.addTotal=="+null")
                    this.addTotal="+0"
                  if(this.addHeal=="+null")
                    this.addHeal="+0"
                  if(this.addDead=="+null")
                    this.addDead="+0"
            }else{
                this.$Message.error("获取数据失败，原因："+ res.exc);
                }
            })
        }
}
</script>

<style scoped>
#totalData{
    height: 100%;
    width: 100%;
    background: transparent;
}
#title{
  display: flex;
  justify-content: center;
    font-weight: normal;
  color: black;
  font-size: 36px;
}
#number{
  display: flex;
  justify-content: center;
  font-size: 66px;
}
#number1{
  display: flex;
  justify-content:center;
  font-size: 36px
}
#data{
  height:234px;
  width: 21vw;
  border: 2px solid #fa2929;
  border-radius:4px;
  box-shadow: 0px 3px 6px #c0c0c0;

}
</style>